<template>
	<view>
		<!-- 自定义顶部导航 start -->
		<uni-nav-bar left-icon="back" statusBar :border="false" title="">
			<view class="king-flex king-align-center king-justify-center king-width">
				所有人可见<text class="iconfont icon-shezhi king-padding-20"></text>
			</view>
		</uni-nav-bar>
		<!-- 自定义顶部导航 end -->
		
		<!-- 文本域 start -->
		<textarea v-model="content" placeholder="这一刻的想法..." placeholder-class="placeholder-color-default" class="uni-textarea king-padding-20" />
		<!-- 文本域 end -->
		
		<!-- 多图上传 start -->
		<upload-image @change="changeImage"></upload-image>
		<!-- 多图上传 end -->
		
		<!-- 底部操作条 start -->
		<view class="king-fixed-bottom bg-white king-flex king-align-center" style="height: 85rpx;">
			<!-- 选择分类 start -->
			<view class="iconfont icon-caidan footer-btn animated faster" hover-class="pulse"></view>
			<!-- 选择分类 end -->
			
			<!-- 选择话题 start -->
			<view class="iconfont icon-huati footer-btn animated faster" hover-class="pulse"></view>
			<!-- 选择话题 end -->
			
			<!-- 选择图片 start -->
			<view class="iconfont icon-tupian footer-btn animated faster" hover-class="pulse"></view>
			<!-- 选择图片 end -->
			
			<!-- 发布按钮 start -->
			<view class="bg-main king-text-white king-margin-left-auto king-flex king-align-center king-justify-center king-rounded-circle-8 king-margin-20 animated faster" hover-class="pulse" style="width: 140rpx; height:60rpx;">发表</view>
			<!-- 发布按钮 end -->
		</view>
		<!-- 底部操作条 end -->
		
	</view>
</template>

<script>
	// 引入自定义导航栏组件
	import uniNavBar from "@/components/uni-ui/uni-nav-bar/uni-nav-bar.vue";
	// 引入多图上传组件
	import uploadImage from '@/components/common/upload-image.vue';
	
	export default {
		components: {
			uniNavBar,
			uploadImage
		},
			
		data() {
			return {
				content: "",
				imageList: []
			}
		},
		methods: {
			// 改变图片
			changeImage(images) {
				this.imageList = images; // 上传图片路径数组，用于发送给服务端处理
			}
		}
	}
</script>

<style>
/* 底部操作条左侧按钮样式  */
.footer-btn {
	width: 86rpx;
	height: 86rpx;
	display: flex;
	justify-content: center;
	align-content: center;
	font-size: 50rpx;
	margin-top: 20rpx;
}

/* 页面背景色 */
page {
	background-color: #FFFFFF;
}

</style>
